<!-- 会员等级 -->
<template>
  <div class="member-box">
    <div class="member-search-box">
      <div class="header">搜索条件</div>
      <div class="body">
        <div class="search-item">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px" size="medium">
            <el-form-item label="是否显示">
              <el-select v-model="formInline.show" placeholder="是否显示">
                <el-option label="显示" value="show"></el-option>
                <el-option label="不显示" value="hidden"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="等级名称" >
              <el-input  v-model="formInline.txt" placeholder="请输入等级名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="member-list-box">
      <div class="header">等级列表</div>
      <div class="btn-box">
        <el-button size="small" type="primary">添加会员等级</el-button>
      </div>
      <el-table :data="memberRank" style="width: 100%">
        <el-table-column label="#" width="80" type="index"></el-table-column>
        <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="等级图标" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.cate_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="等级名称" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.pic?scope.row.pic:'暂无图片' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="等级" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.pic }}</span>
          </template>
        </el-table-column>
        <el-table-column label="享受折扣" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="有效时间" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否永久" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否使用" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="等级说明" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="goodsEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="goodsDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      memberRank: [],
      formInline: {
        txt: "",
        show: ''
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>

<style scoped lang="less">
.member-box{
  .member-search-box,.member-list-box {
    background: #fff;
    // margin: 8px;
    border-radius: 2px;   
  }
  .member-list-box {
    margin-top:18px;
    .btn-box{
      padding: 10px;
    }
  }
  .header {
      position: relative;
      height: 42px;
      line-height: 42px;
      padding: 0 15px;
      border-bottom: 1px solid #f6f6f6;
      color: #333;
      font-size: 14px;
    }
    .body {
      padding: 10px;
      
    }
}

</style>

